<template>
	<view class="charge_container">
		<view class="search-map">
			<!-- 			<view class="search">
				<uni-search-bar style="width: 100%;" radius=4 bgColor='white' @confirm="searchConfirm" :focus="false"
					placeholder="请输入充电桩名称" v-model="searchValue" @input="searchInput" cancelButton="none"
					clearButton='none'>
				</uni-search-bar>
			</view>
			<view class="map" @click="cutfuel()">
				<view class="switch_icon">
					<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/switch.png" mode="aspectFit"></image>
				</view>
				<view class="switch_text">
					<text>切换加油</text>
				</view>
			</view> -->
			<view class="search">
				<view class="input">
					<!-- <image src="../../static/fuel/fuel-search.png" mode=""></image> -->
					<uni-search-bar style="width: 100%;padding: 0px;" radius=20 bgColor='white' :focus="false"
						v-model="searchValue" placeholder="请输入充电桩名称" @input="searchInput" @confirm="searchConfirm"
						cancelButton="none" clearButton='none'>
					</uni-search-bar>
				</view>
				<view class="seitch-charge" @click="cutfuel()">
					<image class="put-image" src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/switch.png" mode=""></image>
					<text>切换加油</text>
				</view>
			</view>
		</view>
		<view class="advertisement">
			<!-- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content"> -->
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay circular>
				<swiper-item v-for="(item, index) in info" :key="item.id">
					<view class="swiper-item">
						<image v-if="info.length>0" :src="item.imgUrl" mode=""></image>
						<text v-else style="color: #fff; font-size: 32px;"></text>
					</view>
				</swiper-item>
			</swiper>
			<!-- </uni-swiper-dot> -->
		</view>
		<view class="product-list">
			<view class="title">
				<view class="title-left">
					<view class="title-item" v-for="item in stationTypeList" :key="item">
						{{item}}
					</view>
				</view>
				<!-- <view class="screen">
					<view>
						综合
					</view>
					<view style="margin-left: 30rpx;">
						筛选
					</view>
				</view> -->
			</view>
			<view class="list">
				<view class="list-item" v-for="item in stationDataList" :key="item.stationId" @click="nextCharge(item)">
					<view class="item-top">
						<view class="name">
							<view class="electricity_icon">
								<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/electricity_icon.png" mode=""></image>
							</view>
							<view class="station_name">
								<text>{{item.stationName}}</text>
							</view>
						</view>
						<view class="position" @click="gohere(item)">
							<view class="location_icon">
								<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/location_icon.png" mode=""></image>
							</view>
							<view class="distance">
								<text>{{item.distance || 0}}km</text>
							</view>
						</view>
					</view>
					<view class="position-name">
						{{item.address}}
					</view>
					<view class="preferential">
						<view class="preferential-price">
							<view class="price">
								<text>非会员价：</text>
								<text style="color: #E56646;">￥</text>
								<text
									style="font-size: 42rpx;color: #E56646;font-weight: 500;">{{(Number(item.periodPrice.eleFee) + Number(item.periodPrice.serFee)).toFixed(2)}}</text>/度
							</view>
							<view class="price">
								<text>会员价：</text>
								<text style="color: #E56646;">￥</text>
								<text
									style="font-size: 42rpx;color: #E56646;font-weight: 500;">{{(Number(item.periodPrice.eleFeeVip) + Number(item.periodPrice.serFeeVip)).toFixed(2)}}</text>/度
							</view>
						</view>
						<view class="idle-status">
							闲{{item.freeNozCnt}}/{{item.nozCnt}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg_box">
			<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/list_bg.png" mode=""></image>
		</view>
		<custom-tabbar />
	</view>
</template>
<script>
	import {
		getListStation,
		chargeListAdv,
		getCode
	} from '@/api/index'
	import customTabbar from '@/components/custom-tabbar.vue'
	import location from '@/utils/getLocation.js'
	import {
		toast
	} from '../../utils/common';
	export default {
		components: {
			customTabbar,
		},
		data() {
			return {
				searchValue: '',
				stationTypeList: ['全部站'], //'会员站', '优选站'
				stationDataList: [],
				info: [],
				lng: '',
				lat: '',
				swiperDotIndex: 0
			};
		},
		onReady() {
			this.getLocation()
		},
		onShow() {
			uni.setStorageSync('FUELORCHARGE', 2)
		},
		onLoad() {
			this.getChargeListAdv()
		},
		onPullDownRefresh() {
			this.stationDataList = [];
			this.info = []
			this.getChargeListAdv()
			this.getStationListFn();
		},
		methods: {
			getLocation() {
				const _self = this;
				location().then(res => {
					_self.lng = res.longitude
					_self.lat = res.latitude
					_self.getStationListFn();
				}).catch(err => {
					if (!err) {
						_self.getStationListFn();
					}
				})
			},
			getCodeData() {
				getCode().then(res => {
					if (res.token) {
						this.getChargeListAdv()
					}
				})
			},
			getChargeListAdv() {
				chargeListAdv().then(res => {
					this.getStationListFn()
					if (res.length > 0) {
						this.swiperDotIndex = 0
						this.info = res
						return
					}
					this.info = []
				}).catch(error => {
					if (error == 'token已过期.') {
						this.getCodeData()
					}
				})
			},
			// 获取站点列表
			getStationListFn(obj) {
				uni.stopPullDownRefresh()
				getListStation({
					stationType: 2, // 1-加油 2-充电
					lng: this.lng || 103.839971,
					lat: this.lat || 30.686594,
					// lat: 30.686594,
					// lng: 103.839971,
					distance: 9999
				}).then(res => {
					if (res && res.length) {
						this.stationDataList = res
					} else {
						console.log(res, 'error')
					}
				}).catch(error => {
					// if (error == 'token已过期.') {
					// 	this.getCodeData()
					// }
				})
			},
			// 切换到油站列表
			cutfuel() {
				uni.switchTab({
					url: '/pages/panda-fuel/index'
				})
				uni.setStorageSync('FUELORCHARGE', 1)
			},
			// 搜索条件
			search() {

			},
			// 搜索框输入事件
			input() {

			},
			// 点击站点去充电
			nextCharge(data) {
				uni.navigateTo({
					url: './charge-station-info/index?stationId=' + data.stationId + '&lng=' + this.lng + '&lat=' +
						this.lat
				})
			},
			//打开地图
			gohere(data) {
				if (this.lng && this.lat) {
					uni.openLocation({
						latitude: data.lat,
						longitude: data.lng,
						name: data.stationName,
						address: data.address
					})
					return
				}
				this.getLocation()
			},
		}
	}
</script>

<style lang="scss">
	.charge_container {
		position: relative;
        padding: 196rpx 30rpx 20rpx;
		//padding: 20rpx 30rpx;

		.bg_box {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
			z-index: -1;

			image {
				width: 100%;
				// height: auto;
			}
		}

		.search-map {
			.search {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 80rpx;
				padding: 0px;
			}

			.input {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin: 0px 16rpx 0rpx 24rpx;
				}

				width: 470rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				input {
					height: 80rpx;
				}
			}

			.seitch-charge {
				background: linear-gradient(90deg, #47c2ff 0%, #478bff 100%);
				width: 200rpx;
				height: 80rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				.put-image {
					width: 28rpx;
					height: 25rpx;
					margin: 26rpx 24rpx;
				}

				text {
					font-size: 28rpx;
					color: #ffffff;
					display: inline-block;
				}

				// font-size: 24rpx;
				// border: 1px solid #99a7a1;
				// border-radius: 24rpx;
				// padding: 8rpx 20rpx;
			}

			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			// .search {
			// 	width: 520rpx;
			// 	display: flex;

			// 	.uni-searchbar {
			// 		padding: 5rpx;

			// 		.uni-searchbar__box {
			// 			height: 60rpx;
			// 		}
			// 	}
			// }

			// .map {
			// 	// width: 200rpx;
			// 	border-radius: 8rpx;
			// 	height: 60rpx;
			// 	padding: 0 12rpx;
			// 	background: linear-gradient(90deg, #47c2ff 0%, #478bff 100%);
			// 	display: flex;
			// 	align-items: center;

			// 	.switch_icon {
			// 		image {
			// 			width: 28rpx;
			// 			height: 26rpx;
			// 		}
			// 	}

			// 	.switch_text {
			// 		padding-left: 10rpx;
			// 		font-size: 24rpx;
			// 		text-align: center;
			// 		line-height: 60rpx;
			// 		color: aliceblue;
			// 	}
			// }
		}

		.advertisement {
			padding: 24rpx 0rpx 40rpx 0rpx;

			.swiper-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 320rpx;
				color: #fff;
				border-radius: 20rpx;
				background-color: #ffffff;
			}

			.image {
				width: 750rpx;
			}

			.swiper-box {
				height: 320rpx;
				width: 100%;
				border-radius: 16rpx;
			}
		}

		.product-list {
			.title {
				padding: 30rpx 0px;
				display: flex;
				justify-content: space-between;

				.title-left {
					display: flex;
					align-items: center;

					.title-item {
						font-weight: 400;
						font-size: 30rpx;
						margin-right: 20rpx;
					}

					.title-item:first-child {
						font-weight: 500;
						color: #478bff;
						font-size: 30rpx;
					}
				}

				.screen {
					display: flex;
					font-size: 28rpx;
					color: cadetblue;
				}
			}

			.list {
				padding: 0rpx 0rpx 110rpx 0rpx;

				.list-item {
					padding: 25rpx 30rpx;
					background-color: white;
					border-radius: 22rpx;
					margin-bottom: 20rpx;

					.item-top {
						display: flex;
						justify-content: space-between;

						.name {
							display: flex;
							align-items: center;

							.electricity_icon {
								padding-top: 10rpx;

								image {
									width: 32rpx;
									height: 32rpx;
								}
							}

							.station_name {
								padding-left: 10rpx;
								font-size: 34rpx;
								font-weight: 500;
								color: #2d2b2a;
							}
						}

						.position {
							display: flex;
							align-items: center;

							.location_icon {
								image {
									width: 18rpx;
									height: 18rpx;
								}
							}

							.distance {
								padding-left: 8rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #2d2b2a;
							}
						}
					}

					.position-name {
						font-size: 26rpx;
						color: #939391;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
					}

					.preferential {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.preferential-price {
							font-size: 26rpx;
						}

						.idle-status {
							font-size: 26rpx;
							color: #2d2b2a;
						}
					}
				}
			}
		}
	}
</style>